import SearchInput from '@c/common/SearchInput'
import CDropdown from '@c/common/CDropdown'
import uuid from 'uuid'
import { mapActions } from 'vuex'

export default {
  components: {
    SearchInput,
    CDropdown
  },
  watch: {
    '$store.state.app.currentMenu': {
      handler(newValue, oldValue) {
        if (!oldValue) {
          return
        }

        setTimeout(() => {
          this.page.shouldGetData = false
          this.$refs['table'].handleSort(0, 'normal')
        })
        this.init()
      }
    }
  },
  data() {
    let that = this
    let stateList = this.$store.state.user.staticObject.ClientState || []

    return {
      searchForm: {},
      originForm: null,
      tempId: null,
      tempItem: null,
      stateList,
      originColumns: [
        {
          title: '服务器名称',
          key: 'ServiceName',
          sortable: 'custom',
          render(h, param) {
            let row = param.row
            let permission = row.MasterOrSlave == 1 ? that.hasPermissionMasterSetup : that.hasPermissionSlaveSetup

            if (permission) {
              return h('span', {
                class: 'primary',
                style: {
                  cursor: 'pointer'
                },
                on: {
                  click() {
                    that.toManage(row)
                  }
                }
              }, row.ServiceName || '--')
            } else {
              return h('span', row.ServiceName || '--')
            }
          }
        },
        {
          title: '主/节点',
          align: 'center',
          key: 'MasterOrSlave',
          sortable: 'custom',
          width: 100,
          windowWidth: 1100,
          render(h, param) {
            return h('span', param.row.MasterOrSlave == 1 ? '节点' : '主')
          }
        },
        {
          title: '服务器IP',
          align: 'center',
          key: 'ServiceIp',
          sortable: 'custom',
          windowWidth: 1250,
          width: 200,
          render(h, param) {
            let title = (param.row.ServiceIp || []).join('，')
            return h('div', {
              class: 'text-fixed',
              domProps: {
                title
              }
            }, title)
          }
        },
        {
          title: '带机量',
          width: 100,
          key: 'BeltCapacity',
          sortable: 'custom',
          align: 'center',
          windowWidth: 700,
          render(h, param) {
            let BeltCapacity = param.row.BeltCapacity
            return h('div', {
              class: param.row.ServiceEnable ? '' : 'red'
            }, BeltCapacity || (param.row.ServiceEnable ? '0' : '已禁用'))
          }
        },
        {
          title: '备注',
          width: 200,
          windowWidth: 1000,
          render(h, param) {
            let ServerRemarks = param.row.ServerRemarks
            return h('div', {
              style: that.util.getClassLineN(2),
              domProps: {
                title: ServerRemarks
              }
            }, ServerRemarks)
          }
        },
        {
          title: '操作',
          width: 110,
          align: 'center',
          render(h, param) {
            let row = param.row
            let permission = row.MasterOrSlave == 1 ? that.hasPermissionMasterSetup : that.hasPermissionSlaveSetup

            return h(CDropdown, {
              props: {
                button: {},
                data: row,
                list: [
                  {
                    hide: !permission,
                    name: uuid(),
                    button: true,
                    size: 'small',
                    text: '配置服务',
                    callback() {
                      that.toManage(row)
                    }
                  }
                ]
              }
            })
          }
        }
      ],
      columns: [],
      page: {
        pageNum: 1,
        pageSize: 20,
        pages: 0,
        total: 0,
        list: [],
        sort: null,
        shouldGetData: true
      },
      loading: false,
      hasPermissionPage: false,
      hasPermissionMasterSetup: false,
      hasPermissionSlaveSetup: false,
      totalSpace: 210,
      tableHeight: null,
      renderTable: true
    }
  },
  beforeMount() {
    this.setAreaId()
    this.init()
  },
  methods: {
    ...mapActions(['changeServer']),
    init() {
      this.setAreaId()
      if (this.areaId) {
        this.copyForm({
          serverId: null,
          content: ''
        })

        this.onRouteChange()
        this.getPage(1)
      }
    },
    sortChange({ column, key, order }) {
      if (!this.page.shouldGetData) {
        this.page.shouldGetData = true
        return
      }

      let orderMap = {
        desc: 2,
        asc: 1,
        normal: 0
      }

      let type = orderMap[order]
      this.page.sort = {
        Field: key,
        Order: type
      }

      this.getPage(1)
    },
    toManage(item) {
      this.changeServer(item)
      this.$router.push({
        path: '/console/server/set',
        query: {
          id: this.areaId + '-' + this.searchForm.serverId,
          serverId: item.ServerUid,
          slave: item.MasterOrSlave || 0
        }
      })
    },
    getPage(pageNum = 1) {
      let serverId = this.searchForm.serverId
      if (!serverId) {
        return
      }

      if (!this.hasPermissionPage) {
        this.util.toMain()
        return
      }

      let page = this.page
      let param = {
        Pid: this.areaId
      }

      let content = this.originForm.content.trim()
      if (content) {
        param.ServiceName = content
      }
      param.OCond = page.sort

      let fnObj = {
        2: api.getResourceServerList,
        3: api.getImageServerList,
        4: api.getWriteServerList,
        5: api.getOtherServerList
      }

      this.loading = true
      page.list = []
      fnObj[serverId](param).then(res => {
        this.loading = false
        let list = res.Data.ServiceList || []
        page.list = list
      }).catch(() => {
        this.loading = false
      })
    }
  }
}